<template>
  <Divider :align="renderValues.align" :type="renderValues.type" :class="renderValues.rootClass">
    <div v-if="renderValues.text && renderValues.text !==''" class="inline-flex align-items-center"
         >
      <i v-if="renderValues.iconClass && renderValues.iconClass !== ''" :class="renderValues.iconClass"
         class="mr-2"></i>
      <span v-if="renderValues.text && renderValues.text !==''" :class="renderValues.textClass"
            :style="renderValues.textStyle">
        {{ renderValues.text }}
      </span>
    </div>
  </Divider>
  <slot name="content"></slot>
</template>

<script lang="ts" setup>
/** 组件 */
import Divider from 'primevue/divider';
import {defineProps, onMounted, reactive, watch, withDefaults} from "vue";

interface EasyContentDividerProps {
  // 分割字符信息
  text: string,
  // 文字对齐方式
  align: 'center' | 'left' | 'right' | 'bottom',
  // root class
  rootClass: string,
  // 文字样式和class
  textStyle: string,
  textClass: string,
  // icon
  iconClass: string,
  type: string
}

/** 钩子参数默认值 */
const props = withDefaults(defineProps<EasyContentDividerProps>(), {
  text: '',
  align: 'left',
});
const renderValues: EasyContentDividerProps = reactive({
  text: props.text,
  align: props.align,
  rootClass: props.rootClass,
  textStyle: props.textStyle,
  textClass: props.textClass,
  iconClass: props.iconClass,
  type: props.type
});
watch(props, (n) => {
  Object.assign(renderValues, n);
}, {deep: true});

</script>

<style lang="less" scoped>
.p-divider-solid {
  &::before {
    border-top-style: solid !important;
  }
}
</style>